<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Reservas LAPI</title>
    <meta name="description" content="">
    <meta name="author" content="Iván Bautista Moreno (@ibaumo)">
    <meta name="author" content="Antonio Conejero Díaz">
    <meta name="author" content="Francisco Gámez Molero">
    <meta name="author" content="Luis Ortiz Fernández">
    <!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta http-equiv="cleartype" content="on">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- For iPhone 4 with high-resolution Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
    <link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
    <link rel="apple-touch-startup-image" href="assets/images/default.png">
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="./lungo.js/lungo-1.2.css">
    <link rel="stylesheet" href="./lungo.js/lungo.theme.default.css">
    <link rel="stylesheet" href="./lungo.js/lungo.sugar.growl.min.css">

</head>

<body class="app">

     <!--++++++++++++++++++++++++++++++++++ index ++++++++++++++++++++++++++++++++++--->
    
	<section id="login">
		<article class="splash indented">
			<div>
				<h1>Reservas<span class="semi-opacity"> LAPI</span></h1>
				<input type="text" id="iniciouser" placeholder="Introduzca usuario..." />
				<input type="password" id="iniciopass" placeholder="Introduce tu contraseña..." />
				<a href="#main" data-target="section" id="btnLogin" class="button big" data-icon="key">Login</a>
				<div class="copyright">Copyright LAPI Inc, 2012 &copy;</div>
			</div>
			<a href="#register" id="btnRegister" data-target="section"><u>Registrarse</u></a>
		</article>
    </section>
    <!--++++++++++++++++++++++++++++++++++ Main Section  ++++++++++++++++++++++++++++++++++-->
	<section id="main">
		<header data-title="Reservas LAPI">
			<a href="#SelectPitch" id="btnReturnMain" data-target="article" data-icon="home" class="button"></a>
		</header>
        <article id="SelectPitch" class="list scrollable"">
            <ul class="list">
			    <li class="anchor" data-icon="home">Elija instalación deportiva</li>
			    <a href="#pitchSanJose" id="btnSanJose" data-label="San José"	 data-target="section" data-icon="calendar" class="button big"></a>
			    <a href="#pitchMariano"	id="btnMariano" data-label="Mariano de la Paz" data-target="section" data-icon="calendar" class="button big"></a>
			    <a href="#pitchLinarejos" id="btnLinarejos" data-label="Linarejos"	 data-target="section" data-icon="calendar" class="button big"></a>
		    </ul>
		</article>

	<!--++++++++++++++++++++++++++++++++++ Alq Section  ++++++++++++++++++++++++++++++++++-->
		<article id="alq" class="list scrollable" >
			   <ul class="list">
			    <li class="anchor" data-icon="star">Pistas deportivas alquiladas:</li>
				</ul>
		</article>
	<!--++++++++++++++++++++++++++++++++++ Config Section  ++++++++++++++++++++++++++++++++++-->
		<article id="config" class="list scrollable" >
			   <ul class="list">
			    <li class="anchor" data-icon="settings mini"> Configuración</li>
                    <table border="1px" cellspacing="12px" cellspacing="20px">
                        <tr>
                            <td><span class="semi-opacity">Foto usuario</span></td>
                            <td><span class="semi-opacity">Datos personales</span></td>
                        </tr>
                        <tr>
                            <td><img src="http://www.publispain.com/caricaturas/famosos/imagenes/will_smith_tomrichmond_com.jpg" height="118px" width="92px" /></td>
                            <td>Ejemplo de usuario</td>
                        </tr>
                        <tr>    
                            <td>Apellido 1</td>
                            <td>Apellido 2</td>
                            <td data-icon="check">Miembro federado</td>
                        </tr>
                    </table>
                <a href="#" class="button red big">Cerrar sesión</a>
                </ul>
		</article>
		<footer id="footerselect" class="toolbar with-labels">
	        <nav> 
		        <a href="#SelectPitch"  class="current" data-target="article" data-icon="home" data-label="Inicio"></a>
		        <a href="#alq" data-target="article" data-icon="items" data-label="Alquiladas"></a>
		        <a href="#config"  data-target="article" data-icon="settings" data-label="Preferencias"></a>
	        </nav>
		</footer>
    </section>
	
		<!--++++++++++++++++++++++++++++++++++ Register Section  ++++++++++++++++++++++++++++++++++-->
        <section id="register">
        <header data-title="Reservas LAPI" data-back="home"></header>
            <article id="form" class="list scrollable">
    	        <form action="#" method="post">
		        <ul class="form">
			        <li class="anchor" data-icon="user mini">
				        <label>Introduce usuario:</label>
				        <input type="text" id="1" placeholder="Introduce tu nick de usuario..." required />			
			        </li>
			        <li class="anchor" data-icon="key mini">
				        <label>Introduzca su contraseña:</label>
				        <input type="password" id="2" placeholder="Introduce tu contraseña..." required />
				        <input type="password" id="3" placeholder="Vuelve a introducir tu contraseña..." required />
			        </li>
                    <li class="anchor" data-icon="user mini">
				        <label>Introduce nombre:</label>
				        <input type="text" id="4" placeholder="Introduce nombre" required />			
				        <input type="text" id="5" placeholder="Introduce apellido 1" required />			
				        <input type="text" id="6" placeholder="Introduce apellido 2" required />			
			        </li>
			        <li class="anchor" data-icon="user mini">
				        <label>Introduce su DNI:</label>
				        <input pattern="[0-9]{8}[A-Z]" id="7" placeholder="con letra, sin guión" required />
			        </li>
			        <li class="anchor" data-icon="mail mini">
				        <label>Introduce tu e-mail:</label>
				        <input type="email" id="8" placeholder="tu.correo@tuisp.dominio" required />
			        </li>
			        <li class="anchor" data-icon="phone mini">
				        <label>Introduce un teléfono de contacto</label>
				        <input name="telefono" id="9" pattern="(+[0-9]{3}) [0-9]{6}}" placeholder="953 123456" >
			        </li>
			        <li class="anchor">
				        <label>¿Federado?</label>
				        <label class="checkbox onright"><input id="10" type="checkbox" required /></label>
			        </li>
			        <li class="anchor">
				        <label>¿Tienes cuenta en PayPal?</label>
				        <label class="checkbox onright"><input id="11" type="checkbox" required /></label>
			        </li>					
		        </ul>
	        <a href="#" class="button big" id="btnSend" data-icon="check">Enviar</a>
	        </form>
            </article>
	
        </section>

		
   	    <!--++++++++++++++++++++++++++++++++++ Pitch Section  ++++++++++++++++++++++++++++++++++-->
		
		<section id="pitchSanJose" >
            <header data-title="Reservas LAPI" data-back="home"></header>
            <article class="list scrollable">
                <ul class="list">
                    <li class="anchor" data-icon="basket">Voy a alquilar una pista de:</li>
                    <a href="#" id="futbol1" class="button big">Futbol</a>
                    <a href="#" id="baloncesto1" class="button big">Baloncesto</a>
                    <a href="#" id="tenis1" class="button big">Tenis</a>
                    <a href="#" id="padel1" class="button big">Padel</a>
                </ul>
            </article>      
		</section>
		<!---------------------------------------------------------->
		<section id="pitchMariano" >
            <header data-title="Reservas LAPI" data-back="home"></header>
            <article class="list scrollable">
                <ul class="list">
                    <li class="anchor" data-icon="basket">Voy a alquilar una pista de:</li>
                    <a href="#" id="A1" class="button big">Futbol</a>
                    <a href="#" id="A2" class="button big">Baloncesto</a>
                    <a href="#" id="A3" class="button big">Tenis</a>
                    <a href="#" id="A4" class="button big">Padel</a>
                </ul>               
            </article> 
		</section>
		<!--------------------------------------------------------------->
		<section id="pitchLinarejos"  >
            <header data-title="Reservas LAPI" data-back="home"></header>
            <article class="list scrollable">
                <ul class="list">
                    <li class="anchor" data-icon="basket">Voy a alquilar una pista de:</li>
                    <a href="#" id="A5" class="button big">Futbol</a>
                    <a href="#" id="A6" class="button big">Baloncesto</a>
                    <a href="#" id="A7" class="button big">Tenis</a>
                    <a href="#" id="A8" class="button big">Padel</a>
                    <a href="#" id="A9" class="button big">Squash</a>
                </ul>
               
            </article> 
		</section>	

	<!--+++++++++++++++++++++++++++++ JavaScript ++++++++++++++++++++++++++++-->

    <!-- LungoJS (Production mode) -->
    <script src="lungo.js/lungo-1.2.js"></script>
    <!-- Librería QuoJS --> 
    <script src="lungo.js/QuoJS.js"></script>
    <script src="lungo.js/lungo-1.2.packed.js"></script>
    <!-- Sugars growl para los mensajes de información -->
    <script src="lungo.js/lungo.sugar.growl.js"></script>
    <script src="lungo.js/lungo.sugar.growl.min.js"></script>
    <!-- LungoJS - Sandbox App -->
    <script src="app/app.js"></script>
    <script src="app/data.js"></script>
    <script src="app/events.js"></script>
    <script src="app/services.js"></script>
    <script src="app/view.js"></script>
</body>
</html>